<template>
  <div v-show="!loading" element-loading-background="rgba(122, 122, 122, 0.8)">
    <div ref="chart_ref" class="map" id="echarts-amap"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import 'echarts/lib/chart/map'
import '@/utils/china.js' // 从echarts4.9.0版本中获取的地图数据，这样引入即可，不需要注册
import geoJson from '@/utils/geoJson.json' //导入地图数据，从中国地图获取的数据需要引入并注册
import { deviceMapApi } from '@/api/statistic'
import usePermissionStore from '@/store/modules/permission'
const allData = ref([]) // 服务器返回的数据
const chart_ref = ref(null)
const mapInstance = ref(null)
function screenAdapter() {
  mapInstance.value.resize()
}

const initOption = ref({})
// 初始化echartInstance
function initChart() {
  mapInstance.value = echarts.init(chart_ref.value, 'echarts-amap')
  initOption.value = {
    backgroundColor: 'transparent', //背景色
    tooltip: {
      trigger: 'item',
      show: true,
      formatter: function (params) {
        const dictValue = localStorage.getItem('dictValue')
        return `${params.data?.name} ${params.data?.count * Number(dictValue)}<br />`
      }
    },
    geo: {
      //地理坐标系组件   地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制
      map: 'geo', //地图类型  这儿展示的是中国地图
      aspectScale: 0.85,
      // selectedMode: 'single', // 开启单选
      label: {
        show: true, //是否显示标签  此处指是否显示地图上的地区名字
        color: '#ffffff',
        fontSize: 14
      },
      roam: true, //是否开启鼠标缩放和平移漫游
      itemStyle: {
        areaColor: '#03365b',
        borderColor: '#4bf3f9',
        shadowColor: '#03365b', //阴影颜色
        shadowOffsetX: 0, //阴影偏移量
        shadowOffsetY: 10 //阴影偏移量
      },
      emphasis: {
        label: {
          show: true,
          color: '#ffffff'
        },
        itemStyle: {
          areaColor: '#0f5d9d'
        }
      },
      scaleLimit: {
        //所属组件的z分层，z值小的图形会被z值大的图形覆盖
        min: 0.2, //最小的缩放值
        max: 3 //最大的缩放值
      },
      center: undefined // 设置中心点为 undefined
    },
    series: [
      {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        showEffectOn: 'render',
        data: [
          // {
          //   name: '滨江区',
          //   selected: true,
          //   value: [120.211981, 30.208332],
          //   itemStyle: { color: '#eeb804' }
          // }
        ],
        rippleEffect: {
          brushType: 'stroke',
          scale: 5,
          period: 2 // 秒数
        },
        symbolSize: 12,
        clickable: false,
        hoverAnimation: true,
        zlevel: 1,
        label: {
          normal: {
            formatter: (params) => {
              return ''
            },
            position: 'right',
            show: true,
            itemStyle: {
              color: '#000'
            }
          }
        }
      }
    ]
  }
  mapInstance.value.setOption(initOption.value)
  mapInstance.value.on('mouseenter', (e) => {
    console.log(e)
  })
}

const loading = ref(true)
function updateChart() {
  deviceMapApi().then((res) => {
    const list =
      res?.data.map((i) => {
        const geo = i.geo?.split(' ').map((item) => {
          return Number(item)
        })
        return {
          ...i,
          value: geo,
          name: i.areaName,
          selected: true,
          itemStyle: { color: '#eeb804' }
        }
      }) || []
    const dataOption = {
      series: [
        {
          data: list
        }
      ]
    }
    mapInstance.value.setOption(dataOption)
    loading.value = false
  })
}

const timer = ref(null)
onUnmounted(() => {
  clearInterval(timer.value)
  // 组件销毁的时候取消监听器
  window.removeEventListener('resize', screenAdapter)
})

onActivated(() => {
  const flag = usePermissionStore().routes.find((i) => i.name == 'Screen')
  if (!flag) {
    return
  }
  console.log('mapChart')
  loading.value = true
  updateChart()
  timer.value = setInterval(() => {
    updateChart()
  }, 30000)
})
onDeactivated(() => {
  clearInterval(timer.value)
})
onMounted(() => {
  const flag = usePermissionStore().routes.find((i) => i.name == 'Screen')
  if (!flag) {
    return
  }
  loading.value = true
  echarts.registerMap('geo', { geoJSON: geoJson })
  initChart()
  updateChart()
  timer.value = setInterval(() => {
    updateChart()
  }, 30000)
  window.addEventListener('resize', screenAdapter)
})
</script>

<style lang="scss" scoped>
.map {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 100vw;
  min-width: 1400px;
  height: calc(100vh - 90px);
  // margin: -50px auto 0;
}
</style>
